<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="app">
    <div class="music">
      <img class="rotateMusic" src="image/music.png" alt="">
    </div>
    <!-- 加载页 -->
    <div class="loading">
      <div class="cloud">
        <div class="cloud_left">
          <img src="image/1.png" alt="">
        </div>
        <div class="cloud_right">
          <img src="image/2.png" alt="">
        </div>
        <div class="cloud_bottom">
          <img src="image/3.png" alt="">
        </div>
      </div>
      <div class="logo">
        <img src="./image/loading页-元素.png" alt="img">
      </div>
      <div class="progress">
        <div class="myprogress">
          <div class="myBar">
            <div class="bar_number">0%</div>
          </div>
        </div>
      </div>
      <div class="loadText">
        <div class="showText">
          <p>想提前揭秘虎年运势吗</p>
          <p>看看明年的你</p>
          <p>能成功逆袭还是继续躺平</p>
          <p>能锦鲤护体还是继续水逆</p>
          <p>摇一摇抽签看运势</p>
          <p>写一写新年小愿望</p>
          <p>二哥统统帮你实现！</p>
        </div>
      </div>
      <div class="page_audio">
        <audio controls="controls" autoplay loop="true" hidden="true">
          <source src="audio/名扬花鼓.mp3" type="audio/mp3" />
        </audio>
      </div>
    </div>
    <!-- 主视觉页面 -->
    <div class="main">
      <div class="cloud">
        <div class="cloud_left">
          <img src="image/5.png" alt="">
        </div>
        <div class="cloud_right">
          <img src="image/6.png" alt="">
        </div>
        <div class="cloud_bottom">
          <img src="image/3.png" alt="">
        </div>
        <div class="cloud_bottom_left">
          <img src="image/4.png" alt="">
        </div>
      </div>
      <div class="curtains">
        <div class="curtains_top">
          <img src="image/窗帘顶.png" alt="">
        </div>
        <div class="curtains_left">
          <img class="curtains_img_one" src="image/左窗帘布.png" alt="">
          <img class="curtains_img_two" src="image/左窗帘带.png" alt="">
        </div>
        <div class="curtains_right">
          <img class="curtains_img_one" src="image/右窗帘布.png" alt="">
          <img class="curtains_img_two" src="image/右窗帘带.png" alt="">
        </div>
      </div>
      <div class="halo">
        <img src="image/光线2.png" alt="">
      </div>
      <div class="sign_center">
        <img class="signboard" src="image/签.png" alt="">
      </div>
      <div class="title">
        <img src="image/舞虎起飞.png" alt="">
      </div>
      <div class="title_text">
        <img src="image/标题.png" alt="">
      </div>
      <!-- <div class="woods">
        <div class="woods_left">
          <img src="image/树1.png" alt="">
        </div>
        <div class="woods_right">
          <img src="image/树2.png" alt="">
        </div>
      </div> -->
      <div class="tiger_left main_erge">
        <img src="image/抽签页二哥.png" alt="">
      </div>
      <div class="audio_cont">
        <audio src="audio/摇一摇抽签.mp3"></audio>
      </div>
      <div class="iosTips">
        <p>iOS13及以上系统点击屏幕并授权才可揭秘运势 </p>
      </div>
    </div>
    <!-- 中签页 -->
    <div class="lottery">
      <div class="shelter"></div>
      <!-- <div class="halo_center">
        <img src="image/光环.png" alt="">
      </div> -->
      <div class="cloud">
        <div class="cloud_left">
          <img src="image/5.png" alt="">
        </div>
        <div class="cloud_right">
          <img src="image/6.png" alt="">
        </div>
        <div class="cloud_bottom">
          <img src="image/3.png" alt="">
        </div>
        <div class="cloud_bottom_left">
          <img src="image/4.png" alt="">
        </div>
      </div>
      <div class="curtains">
        <div class="curtains_top">
          <img src="image/窗帘顶.png" alt="">
        </div>
        <div class="curtains_left">
          <img src="image/左窗帘.png" alt="">
        </div>
        <div class="curtains_right">
          <img src="image/右窗帘.png" alt="">
        </div>
      </div>
      <!-- <div class="halo">
        <img src="image/光线2.png" alt="">
      </div> -->
      <div class="sign_center">
        <img src="image/签.png" alt="">
      </div>
      <div class="title">
        <img src="image/舞虎起飞.png" alt="">
      </div>
      <div class="label_box">
        <div class="label_cont">
          <div class="label label_left_one" data-index="0" data-name="事业">
            <img src="./image/q1.png" alt="">
          </div>
          <div class="label label_left_two" data-index="1" data-name="财富">
            <img src="./image/q2.png" alt="">
          </div>
          <div class="label label_center" data-index="2" data-name="家庭">
            <img src="./image/q3.png" alt="">
          </div>
          <div class="label label_right_one" data-index="3" data-name="健康">
            <img src="./image/q4.png" alt="">
          </div>
          <div class="label label_right_two" data-index="4" data-name="姻缘">
            <img src="./image/q5.png" alt="">
          </div>
        </div>
      </div>
      <div class="autograph">
        <img class="autograph_logo" src="" alt="">
        <img class="autograph_logo_bot" src="./image/签2.png" alt="">
        <div class="auto_text">
          <p>孔子修身不厌贫</p>
        </div>
      </div>
      <div class="lottery_box">
        <img src="image/二哥.png" alt="">
      </div>
      <div class="lottery_text_box">
        <div class="lottery_top">
          <div class="ball_cont">
            <div class="ball">
              <div class="ball_two_cont">
                <div class="ball_Two"></div>
              </div>
            </div>
            <div class="ball">
              <div class="ball_two_cont">
                <div class="ball_Two"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="lottery_center">
          <div class="ball_cont">
            <div class="ball">
              <div class="ball_two_cont">
                <div class="ball_Two ball_min"></div>
              </div>
            </div>
            <div class="ball">
              <div class="ball_two_cont">
                <div class="ball_Two"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="lottery_right">
          <div class="ball_cont">
            <div class="ball">
              <div class="ball_two_cont">
                <div class="ball_Two"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="lottery_text_img">
          <img class="lottery_text_left" src="image/点击揭秘文字左.png" alt="">
          <img class="lottery_text_right" src="image/点击揭秘文字右.png" alt="">
        </div>
      </div>
    </div>
    <!-- 五虎 -->
    <div class="cause">
      <div class="cloud">
        <div class="cloud_left">
          <img src="image/1.png" alt="">
        </div>
        <div class="cloud_right">
          <img src="image/2.png" alt="">
        </div>
        <div class="cloud_bottom">
          <img src="image/3.png" alt="">
        </div>
      </div>
      <div class="brand_return">
        <img src="./image/返回.png" alt="">
        <h2>其他运势</h2>
      </div>
      <div class="band_cont">
        <div class="brand">
          <div class="brand_cont">
            <img class="band_logo" src="./image/姻缘虎logo.png" alt="">
            <img class="brand_box" src="./image/中签框.png" alt="">
            <div class="band_text">
              <div class="text_left">
                <p></p>
              </div>
              <div class="text_center">
                <p></p>
              </div>
              <div class="text_title_right">
                <div class="text_right_two">
                  <p></p>
                </div>
                <div class="text_right">
                  <p></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="brand_btn">
          <img class="btnOne" src="./image/again.png" alt="">
          <img class="btnTwo" src="./image/desire.png" alt="">
        </div>
        <!--生成的图片的存放容器-->
        <div class="shareImg"></div>
      </div>
      <div class="press_img">
        <img src="" class="target">
      </div>
    </div>
    <!-- 新年许愿 -->
    <div class="wish">
      <div class="cloud">
        <div class="cloud_left">
          <img src="image/9.png" alt="">
        </div>
        <div class="cloud_right">
          <img src="image/8.png" alt="">
        </div>
        <div class="cloud_right_two">
          <img src="image/10.png" alt="">
        </div>
        <div class="cloud_bottom">
          <img src="image/3.png" alt="">
        </div>
      </div>
      <div class="wish_bg">
        <img src="image/许愿页.png" alt="">
      </div>
      <div class="wish_text">
        <textarea id="wish_text_cont" maxlength="30"></textarea>
      </div>
      <div class="wish_rule">
        <img src="image/许愿规则.png" alt="">
      </div>
      <div class="wish_success">
        <img class="wish_success_one" src="image/完成许愿.png" alt="">
        <img class="wish_success_two" src="image/again.png" alt="">
      </div>
      <div class="tiger_left_wish">
        <img src="image/他二哥.png" alt="">
      </div>
    </div>
    <!-- 许愿规则 -->
    <div class="regulation">
      <div class="cloud">
        <div class="cloud_right">
          <img src="image/8.png" alt="">
        </div>
        <div class="cloud_right_two">
          <img src="image/10.png" alt="">
        </div>
        <div class="cloud_bottom">
          <img src="image/3.png" alt="">
        </div>
      </div>
      <div class="wish_bg">
        <img src="image/规则弹窗页.png" alt="">
      </div>
      <div class="wish_success">
        <img src="image/完成许愿.png" alt="">
      </div>
      <div class="tiger_left">
        <img src="image/hu1.png" alt="">
      </div>
      <div class="tiger_right">
        <img src="image/hu2.png" alt="">
      </div>
      <div class="shelter"></div>
      <div class="prpup">
        <img class="prpup_box" src="image/活动规则.png" alt="">
        <img class="prpup_btn" src="image/close.png" alt="">
      </div>
    </div>
    <!-- 美食预告 -->
    <div class="Notice">
      <div class="cloud">
        <div class="cloud_right">
          <img src="image/11.png" alt="">
        </div>
        <div class="cloud_bottom">
          <img src="image/13.png" alt="">
        </div>
        <div class="cloud_bottom_left">
          <img src="image/12.png" alt="">
        </div>
      </div>
      <div class="notice_cont">
        <img src="image/美食预告页文字.png" alt="">
      </div>
      <div class="food_top">
        <img src="image/食物1.png" alt="">
      </div>
      <div class="food_bottom">
        <img src="image/食物3.png" alt="">
      </div>
      <div class="Notice_return">
        <img src="image/再来一签（黄）.png" alt="">
      </div>
    </div>
  </div>
</body>
<script src="script/jweixin-1.6.0.js"></script>
<script src="script/tween.js"></script>
<script src="script/animation.js"></script>
<script src="script/script.js"></script>
</html>